﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us" dir="ltr" class="gecko win">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta name="description" content="This is the detail page each for card in game, contains stats info, name. Sword Girls Anime magic card game." />
    <meta name="keywords" content="Anime,web game,magic card,fan page" />
    <meta name="geo.region" content="KR-11" />
    <meta name="geo.placename" content="Seoul" />
    <meta name="geo.position" content="37.56165;126.982103" />
    <meta name="ICBM" content="37.56165, 126.982103" />

    <title>Sword Girls Add new card</title>
    <style>
        table {
            margin: 5px !important;
        }

        td {
            padding: 5px 5px 0 0 !important;
        }

            td:first-child {
                text-align: left !important;
                width: 100px !important;
                font-weight: bold !important;
            }

        textarea {
            max-width: 500px;
            min-width: 200px;
            width: 400px;
        }

        input[type="text"] {
            max-width: 500px;
            min-width: 350px;
            width: 200px;
        }
    </style>
    <script type="text/javascript">
        // only used for standalone version
        var Loader = { datastream: null, cards: [] };
        var AddedCards = [];
    </script>
    <script src="data_S03.js" type="text/javascript"></script>
    <script type="text/javascript">
        Loader.cards = Loader.cards.concat(cards); console.log("Load the Third part"); console.log("End File 3");
    </script>
    <!--	<script src="SwordGirlData.js" type="text/javascript"></script>
	<script src="http://underscorejs.org/underscore-min.js"  type="text/javascript"></script	-->
    <script type='text/javascript'>
        function validate() {
            var info = "";
			
            if (isNaN(document.getElementById('id').value) || document.getElementById('id').value.trim().length != 6) {
                info = "Id is wrong format, a number from 100000 to 399999.";
                document.getElementById('InforP').textContent = info;
                document.getElementById('id').focus();
                return;
            }
			var id = parseInt(document.getElementById('id').value);
			if (id < 100000 && id > 400000) {
                info = "Id is a number from 100000 to 399999.";
                document.getElementById('InforP').textContent = info;
                document.getElementById('id').focus();
                return;
            }
			
            if (document.getElementById('krname').value.trim().length == 0) {
                info = "Orignal name is needed";
                document.getElementById('InforP').textContent = info;
                return;
            }

            if (document.getElementById('name').value.trim().length == 0) {
                info = "English name is needed";
                document.getElementById('InforP').textContent = info;
                return;
            }

            if (document.getElementById('episode').value.trim().length == 0) {
                info = "Episode is empty";
                document.getElementById('episode').focus();
                document.getElementById('InforP').textContent = info;
                return;
            }
			
			if (id < 129999){
				if (document.getElementById('life').value.trim().length < 2 ||
				isNaN(document.getElementById('life').value) || 
				parseInt(document.getElementById('life').value) > 99 ||
				parseInt(document.getElementById('life').value) < 15
				) {
					info = "Life is be must higher than 15";
					document.getElementById('life').focus();
					document.getElementById('InforP').textContent = info;
					return;
				} 
            }
            else {
				if (document.getElementById('size').value.trim().length == 0 ||
					isNaN(document.getElementById('size').value.trim()) ||
					parseInt(document.getElementById('size').value) > 11 ||
					parseInt(document.getElementById('size').value) < 0
					) {
					info = "Size is empty, or not in range 0-10.";
					document.getElementById('episode').focus();
					document.getElementById('InforP').textContent = info;
					return;
				}
			}

            addCard();
        }

        function addCard() {

            //console.log('checking data');
            console.log(document.getElementById('id').value);

            var newCard = {};

            newCard['krname'] = document.getElementById('krname').value.trim();
            newCard['playable'] = document.getElementById('playable').value == 1 ? true : false;
            newCard['id'] = parseInt(document.getElementById('id').value.trim());
            newCard['released'] = true;
            newCard['episode'] = document.getElementById('episode').value.trim();
            newCard['name'] = document.getElementById('name').value.trim();
            newCard['limit'] = document.getElementById('limit').value.trim();
            newCard['size'] = document.getElementById('size').value.trim();
			
            if (newCard.id > 300000) {
                newCard['stats'] = {
                    atk: document.getElementById('atk').value.trim(),
                    def: document.getElementById('def').value.trim(),
                    sta: document.getElementById('sta').value.trim()
                };
                console.log('// This card is a Follwers');
            }           // End If this card is a Follwers

            if (newCard.id > 100000 && newCard.id < 129999) {
                newCard['life'] = document.getElementById('life').value.trim();
				delete newCard.size;
                console.log('// This card is a Character');
            }            // end if this card is a character, spell card has no stat or life

            newCard['faction'] = document.getElementById('faction').value.trim();
            newCard['CP'] = document.getElementById('CP').value.trim();
            newCard['rarity'] = document.getElementById('rarity').value.trim();
            newCard['ability'] = document.getElementById('ability').value.trim().replace(/\"/g, '\"');  //Replace ' " ' char to ' \" ' char
            newCard['text'] = document.getElementById('text').value.trim().replace(/\"/g, '\"');  //Replace ' " ' char to ' \" ' char
            newCard['artist'] = document.getElementById('artist').value.trim();
            newCard['recipe'] = null;
            newCard['ingredients'] = null;
            newCard['makes'] = null;

            var AddedList = document.getElementById('AddedList');

            if (AddedCards.length == 0) {
                AddedCards.push(newCard);
                console.log("Added " + newCard.krname + " | " + newCard.name + " | ID: " + newCard.id);
                alert("Added " + newCard.name + " | ID: " + newCard.id);
                console.log("Add brand new for empty List");

                var selectBoxOption = document.createElement("option");//create new option
                selectBoxOption.value = newCard.id;//set option value
                selectBoxOption.text = newCard.name;//set option display text
                AddedList.add(selectBoxOption, null);//add created option to select box.				
            }
            else {
                var flag = true;
                for (var i = 0; i < AddedCards.length; i++) {
                    if (newCard.id == AddedCards[i].id) {
                        flag = false;
                    }
                }

                if (flag) {
                    // Add card to Json data

                    AddedCards.push(newCard);
                    console.log("Added " + newCard.krname + " | " + newCard.name + " | ID: " + newCard.id);
                    alert("Added " + newCard.name + " | ID: " + newCard.id);


                    var selectBoxOption = document.createElement("option");//create new option
                    selectBoxOption.value = newCard.id;//set option value
                    selectBoxOption.text = newCard.name;//set option display text
                    AddedList.add(selectBoxOption, null);//add created option to select box.
                }
                else {
                    console.log("A card with this ID: " + newCard.id + " existed. No card add.");
                    newCard = null;
                }
            }
        }

        function reset() {
            document.getElementById('AddForm').reset();
        }

        function saveTextAsFile() {
            //Saving Methods -->
            //var flag = true;							
			Loader.cards = Loader.cards.concat(AddedCards);
			
			Loader.cards = Loader.cards.filter(function(elem, pos) {
				return Loader.cards.indexOf(elem) == pos;
			})
            // Get text content from Json Array
            var textToWrite = "cards = [\n";
            for (var i = 0; i < Loader.cards.length; i++) {
                textToWrite += JSON.stringify(Loader.cards[i]);
                textToWrite += ',\n';
            }

            textToWrite += "]";
            // End build string array from Json array

            var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });

            // get filename
            var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

            var downloadLink = document.createElement("a");
            downloadLink.download = fileNameToSaveAs;
            downloadLink.innerHTML = "Download File";
            if (window.webkitURL != null) {
                // Chrome allows the link to be clicked
                // without actually adding it to the DOM.
                downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
            }
            else {
                // Firefox requires the link to be added to the DOM
                // before it can be clicked.
                downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
                //downloadLink.onclick = destroyClickedElement;
                //downloadLink.style.display = "none";
                document.body.appendChild(downloadLink);
            }

            downloadLink.click();
        }

        function destroyClickedElement(event) {
            document.body.removeChild(event.target);
        }

        function loadFileAsText() {
            var fileToLoad = document.getElementById("fileToLoad").files[0];

            var fileReader = new FileReader();
            fileReader.onload = function (fileLoadedEvent) {
                var textFromFileLoaded = fileLoadedEvent.target.result;
                document.getElementById("inputTextToSave").value = textFromFileLoaded;
            };
            fileReader.readAsText(fileToLoad, "UTF-8");
        }
    </script>


    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="SGO-cardbuilder-card">
    <script type="text/javascript">
        document.body.id = 'javascript-enabled'
    </script>
    <div id="page" class="cardviewer">
        <div id="style-wrapper">
            <span id="style-cardviewer-ctl"></span><span id="style-cardviewer-ctr"></span><span
                id="style-cardviewer-cbl"></span><span id="style-cardviewer-cbr"></span>
            <div id="style-wrapper-1">
                <div id="style-wrapper-2">
                    <p id="InforP" style="padding: 1em;"></p>
                    <form id="AddForm">
                        <table id="DataNew" style="padding: 0.3em">
                            <tr>
                                <td>ID</td>
                                <td>
                                    <input id="id" type="text" autofocus="autofocus" required="required" placeholder="6 digits, starts with 1, 2 or 3" maxlength="6" />
                                     (*)<input checked="checked" id="playable" type="checkbox" />Playable (or is NPC)</td>
                            </tr>
                            <tr>
                                <td>Korea name</td>
                                <td>
                                    <input id="krname" type="text" size="50" required="required" placeholder="Original name" /> (*)</td>
                            </tr>
                            <tr>
                                <td>Name</td>
                                <td>
                                    <input id="name" type="text" size="50" required="required" placeholder="English translation" /> (*)</td>
                            </tr>
                            <tr>
                                <td>Episode</td>
                                <td>
                                    <input id="episode" required="required" type="text" maxlength="3" placeholder="0, 1, 20, EX2, UE3,..." /> (*)</td>
                            </tr>
                            <tr>
                                <td>Faction</td>
                                <td>
                                    <select id="faction" required="required">
                                        <option value="vita">Vita</option>
                                        <option value="academy">Academy</option>
                                        <option value="crux">Crux</option>
                                        <option value="darklore">Darklore</option>
                                        <option value="sg">Natural</option>
                                        <option value="empire">Empire</option>
                                    </select> (*)</td>
                            </tr>
                            <tr>
                                <td>Limit</td>
                                <td>
                                    <select id="limit" required="required">
                                        <option value="0">0</option>
                                        <option value="1" selected="selected">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="5">5</option>
                                    </select></td>
                            </tr>
                            <tr>
                                <td>Size</td>
                                <td>
                                    <input id="size" type="text" placeholder="1-10" required="" maxlength="2" /></td>
                            </tr>
                            <tr>
                                <td>Life</td>
                                <td>
                                    <input id="life" placeholder="Life higher than 0, leave blank for follwer or spell" type="text" maxlength="2" /><br />

                                </td>
                            </tr>
                            <tr>
                                <td>Stat</td>
                                <td>
                                    <input id="atk" placeholder="ATK, max 99. Leave them all blank for spell" type="text" maxlength="2" /><br />
                                    <input placeholder="DEF, max 99" id="def" type="text" maxlength="2" /><br />
                                    <input placeholder="STA, 0 - 99" id="sta" type="text" maxlength="2" />
                                </td>

                            </tr>
                            <tr>
                                <td>Card Point</td>
                                <td>
                                    <input id="CP" type="text" maxlength="3" required="" placeholder="0-100" /> (*)</td>
                            </tr>

                            <tr>
                                <td>Ratity</td>
                                <td>
                                    <select id="rarity" required="required">
                                        <option value="Common">Common</option>
                                        <option value="Uncommon">Uncommon</option>
                                        <option value="Rare">Rare</option>
                                        <option value="D.Rare">D.Rare</option>
                                        <option value="sg">Natural</option>
                                        <option value="Event">Event</option>
                                        <option value="Imperial">Imperial</option>
                                    </select></td>
                            </tr>
                            <tr>
                                <td>Ability</td>
                                <td>
                                    <textarea id="ability" placeholder="English tralastion, not required"></textarea></td>
                            </tr>
                            <tr>
                                <td>Text</td>
                                <td>
                                    <textarea id="text" placeholder="Some story text, not required"></textarea></td>
                            </tr>
                            <tr>
                                <td>Artist</td>
                                <td>
                                    <input type="text" id="artist" placeholder="in Korean or English" /></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <button id="addCard" onclick="validate();" type="button">Add this</button>
                                    <button id="clear" onclick="reset();" type="button">Reset</button></td>
                            </tr>
                        </table>
                    </form>
                    <hr class="clear" />
                    <table>
                        <tr>
                            <td>
                                <select id="AddedList" size="5" style="width: 250px;">
                                </select>
                            </td>
                            <td>
                                <input id="inputFileNameToSaveAs" placeholder="Enter file name here" type="text" /><br />
                                <button onclick="saveTextAsFile()">Save to File</button></td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
    </div>
</body>
</html>
